<template>
    <section class="myCollection-box">
        <ul v-show="!noDataShow" >
            <li class="clearfix" v-for="(item, index) in myCollectionHouseItem" :key="index">
                <a-card :title="null" hoverable :loading="myCollectionHouseListLoading">
                    <a-row :gutter="32">
                        <a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="left-box">
                            <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">
                                <img v-lazy="item.photo" alt="">
                            </router-link>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11" class="center-box">
                            <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" class="webkit-text-overflow-1lines">{{ item.title }}</router-link>
                            <p>
                                <span>{{ isNull0(item.type) }}</span> |
                                <span>{{ isNull0(item.projectType) }}</span> |
                                <span>{{ isNull0(item.minArea) }} {{ isMinMaxArea(item.maxArea) }}</span> |
                                <span>{{ isNull0(item.handoverDate) }}</span> |
                                <span>{{ isNull0(item.housingProperty) }}</span>
                            </p>
                            <p><i class="iconfont icon-dingwei1"></i> {{ isNull0(item.address) }}</p>
                            <p>
                                <i class="iconfont icon-shujutongji"></i>
                                <span>近一年房价涨幅<em>{{ isNull0(item.rose, '%') }}</em></span> |
                                <span>年均租金收益<em>{{ isNull0(item.rent, '%') }}</em></span> |
                                <span>首付比例<em>{{ isNull0(item.downPayment, '%') }}</em></span>
                            </p>
                            <aside>
                                <i v-for="(itemTags, indexTags) in item.tags.split(',')" :key="indexTags">{{ itemTags }}</i>
                            </aside>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="right-box">
                            <a-button v-ripple class="btn-danger" type="danger" @click="cencelContrast(item.id)" v-show="!isContrast(item.id)"><i class="iconfont icon-cencel"></i> 取消对比</a-button>
                            <a-button v-ripple type="primary" @click="joinContrast(item.id)" v-show="isContrast(item.id)"><i class="iconfont icon-tianjia"></i> 加入对比</a-button>
                            <a-tooltip class="collection-house" title="取消收藏" placement="top">
                                <i class="iconfont icon-xin1" @click.stop.prevent="cancelCollectionHouse(item.id)"></i>
                            </a-tooltip>
                            <p>
                                <span v-if="item.minPrice && item.maxPrice">{{ isNull0_USD(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</span>
                                <span v-else>{{ isNull0_USD(item.price) }}万</span>
                            </p>
                            <aside>
                                <span v-if="item.minPrice && item.maxPrice">{{ isNull0_RMB(item.minPrice, '', isCurrency(item.countryName)) }} {{ isMinMaxRMBPrice(item.maxPrice, isCurrency(item.countryName)) }}</span>
                                <span v-else>{{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                            </aside>
                        </a-col>
                    </a-row>
                </a-card>
            </li>
        </ul>
        <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;" v-show="!noDataShow">
            <a-pagination
                    :showTotal="total => `共 ${total} 条`"
                    showQuickJumper
                    showSizeChanger
                    :current="pageNumber"
                    :pageSize="pageSize"
                    :total="total"
                    @change="pageNumberChange"
                    @showSizeChange="pageSizeChange"/>
        </div>
        <div class="noData-box" v-show="noDataShow">
            <img src="/static/img/not-Collection-houses.jpg" alt="">
        </div>

        <p v-show="false">{{getHouseContrast}}</p>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                myCollectionHouseItem: [],//我的收藏房源数据
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数
                myCollectionHouseListLoading: true,//列表加载loading
                noDataShow: false,//展会列表数据——没有数据提示信息是否显示
                HouseContrastIdArr: [],//记录房源对比的id

            }
        },
        metaInfo () {
            return {
                title: '个人收藏房源_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '个人收藏房源_华美优胜美国房地产投资公司' },
                    { vmid: 'description', name: 'description', content: '个人收藏房源_华美优胜美国房地产投资公司' },

                ],
            }
        },
        computed: {
            //从state获取房源对比栏的数据
            getHouseContrast() {
                if(this.$store.getters.get_HouseContrast){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_HouseContrast).length != 0){
                        this.HouseContrastIdArr = this.$store.getters.get_HouseContrast;
                    }else{
                        // if(localStorage.duibi_houseId){
                        //     this.HouseContrastIdArr = localStorage.duibi_houseId.split(',');
                        // }
                    }
                }
                return this.$store.getters.get_HouseContrast
            },
        },
        mounted() {
            // 获取我的收藏房源数据
            this.getMyCollectionHouseData();
        },
        methods: {
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.myCollectionHouseListLoading = true;
                this.getMyCollectionHouseData();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.myCollectionHouseListLoading = true;
                this.getMyCollectionHouseData();
            },
            // 获取我的收藏房源数据
            getMyCollectionHouseData() {
                this.$get(`/collection/list/${this.pageNumber}/${this.pageSize}`).then(res => {
                    this.myCollectionHouseListLoading = false;
                    if (res.status == 0) {
                        this.myCollectionHouseItem = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            //取消收藏房源
            cancelCollectionHouse(houseId){
                this.$post('/collection/house/' + houseId).then(res => {
                    if (res.status == 0) {
                        this.$message.success('取消收藏操作成功！');
                        //更新我的收藏房源数据
                        this.getMyCollectionHouseData()
                    } else {
                        this.$message.warning(res.msg);
                    }
                })
            },
            //加入对比
            joinContrast (id) {
                if(this.HouseContrastIdArr.length >= 3){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已满，您可以删除不需要的栏内房源再继续添加哦！'
                    });
                }else{
                    this.HouseContrastIdArr.push(id);
                    //新房列表页、个人中心-我的收藏房源页使用——房源对比
                    this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);
                }
            },
            //取消对比
            cencelContrast (id) {
                //-----------------------把对应的值从数组删除-----------------------
                Array.prototype.removeByValue = function(val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) {
                            this.splice(i, 1);
                            break;
                        }
                    }
                };
                this.HouseContrastIdArr.removeByValue(id);
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);

                if(this.HouseContrastIdArr.length == 0){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已清空！'
                    });
                }
            },
            //判断此房源是否添加到房源对比栏
            isContrast(id) {
                let isShow = false;//false显示取消对比按钮，true显示加入对比按钮
                if (this.HouseContrastIdArr.indexOf(id) != -1) {
                    isShow = false;
                } else {
                    isShow = true;
                }
                return isShow;
            },

        },
        components: {

        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .myCollection-box {
            > ul {
                > li {
                    padding: 30px 20px;
                    border-bottom: 1px solid #E6E6E6;
                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                    .ant-card {
                        border: none;
                        > .ant-card-body {
                            padding: 0;
                            > .ant-row {
                                > .left-box {
                                    > a {
                                        > img {
                                            width: 100%;
                                            height: 200px;
                                            cursor: pointer;
                                        }
                                    }
                                    text-align: justify;
                                }
                                > .center-box {
                                    > a {
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: #38485a;
                                        margin: 5px 0;
                                        cursor: pointer;
                                        -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    }
                                    > a:hover {
                                        color: #00b8ee;
                                    }
                                    > p {
                                        margin: 4px 0;
                                        > span {
                                            margin: 0 6px;
                                            > em {
                                                font-size: 18px;
                                                color: #f65248;
                                            }
                                        }
                                        > span:first-of-type {
                                            margin: 0;
                                        }
                                        > i {
                                            color: #0087e5;
                                        }
                                    }
                                    > aside {
                                        margin: 30px 0 0 0;
                                        > i {
                                            display: inline-block;
                                            padding: 4px;
                                            border: 1px solid #ccc;
                                            margin: 0 4px;
                                        }
                                        > i:first-of-type {
                                            margin: 0;
                                        }
                                    }
                                }
                                > .right-box {
                                    text-align: center;
                                    > button {
                                        color: #fff;
                                        margin: 30px 0 10px 0;
                                    }
                                    > i.collection-house {
                                        display: block;
                                        font-size: 20px;
                                        color: #f65248;
                                        font-weight: bold;
                                        margin: 0 auto;
                                        cursor: pointer;
                                        -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    }
                                    > i.collection-house:hover {
                                        transform: scale(1.2);
                                    }
                                    > i.collection-house:active {
                                        transform: scale(1.5, 1.5);
                                    }
                                    > p {
                                        font-size: 20px;
                                        margin: 8px 0 0 0;
                                        color: #f65248;
                                    }
                                    > aside {

                                    }
                                }
                            }
                        }
                    }
                    .ant-card-hoverable:hover {
                        box-shadow: none;
                    }
                }
                > li:hover {
                    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                    -webkit-transform: translate3d(0, 0px, -2px);
                    transform: translate3d(0, 1px, -2px);
                }
            }
            /*没有数据*/
            >.noData-box {
                text-align: center;
                margin: 120px 0;
                > h5 {
                    color: #00b8ee;
                }
                > img {
                    width: 80%;
                }
            }
        }
    }
</style>
